﻿@{
    ViewBag.Title = "DynamicData";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    #map {
      width: 100%;
      height: 500px;
      border: 1px solid #000;
    }
</style>

@Html.Partial("~/Views/Shared/_PageNote.cshtml")

<div id="map"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    // Creating an array that will contain all of our weather icons
    var weatherIcons = [];

    weatherIcons['clouds'] = new google.maps.MarkerImage(
        '/Images/weather/clouds.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );

    weatherIcons['rain'] = new google.maps.MarkerImage(
        '/Images/weather/rain.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );

    weatherIcons['sun'] = new google.maps.MarkerImage(
        '/Images/weather/sun.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );

    window.onload = function () {
        // Creating a map
        var options = {
            zoom: 3,
            center: new google.maps.LatLng(31.294981, 121.478577),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'), options);

        // Creating a JSON object with weather data
        var weatherData = { 
            'weather': [
                {
                    'lat': 31.294981,
                    'lng': 121.478577,
                    'weatherType': 'sun'
                },
                {
                    'lat': 23.160563,
                    'lng': 113.25943,
                    'weatherType': 'rain'
                },
                {
                    'lat': 39.93396,
                    'lng': 116.404266,
                    'weatherType': 'clouds'
                }
            ]
        };

        // Looping through the weather array in weatherData
        for (var i = 0; i < weatherData.weather.length; i++) {
            // creating a variable that will hold the current weather object
            var weather = weatherData.weather[i];

            // Creating marker
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(weather.lat, weather.lng),
                map: map,
                icon: weatherIcons[weather.weatherType]
            });
        }
    }
</script>
